<template>
  <div class="card-list">
    <Row v-for="row in list" :key="row.id" :row="row" :cardData="row.data" />
  </div>
</template>

<script lang="js">
import { defineComponent } from 'vue'
import Row from './row.vue'
export default defineComponent({
  components: {
    Row
  },
  setup() {
    const list = [
      { id: 1, title: '数据统计', data: [ { name: '车牌数据', data: '542534' }, { name: '接口访问', data: '53454' } ], color: '#4e73df', icon: 'sfont system-yonghu' },
      { id: 2, title: '接口统计', data: [ { name: 'query', data: '100323' }, { name: 'confirm', data: '312321' } ], color: '#1cc88a', icon: 'sfont system-xiaoxi' },
      { id: 3, title: '接口统计', data: [ { name: 'query', data: '100323' }, { name: 'confirm', data: '312321' } ], color: '#36b9cc', icon: 'sfont system-shuliang_mianxing' },
      { id: 4, title: '接口统计', data: [ { name: 'query', data: '100323' }, { name: 'confirm', data: '312321' } ], color: '#f6c23e', icon: 'sfont system-jindutiaoshouyidaozhang' }
    ]
    return {
      list
    }
  }
})
</script>

<style lang="scss" scoped>
  .card-list {
    width: calc(100% + 20px);
    margin-left: -10px;
    display: flex;
    flex-wrap: wrap;
  }
</style>